<template>
  <div>
    <!-- 左对齐 -->
    <div style="display: flex;justify-content: space-around;background: white">
      <van-search
        :value="searchWord"
        shape="round"
        use-action-slot
        style="width:80%;height:54px"
        placeholder="请输入搜索关键词"
      >
      </van-search>
      <div style="color:#0076FF;font-size: 1.1rem;line-height:54px; ">搜索</div>

    </div>


    <div class="van-hairline--bottom">
      <div style="color:#101010;font-size: 1.75rem">为你推荐</div>
      <van-grid :column-num="2">
        <van-grid-item to="/carDetails">
          <div style="text-align:left;width:100%;height:214px">
            <div style="text-align:center;width:100%;height:8rem">
              <van-image width="8rem" height="100%" :src="gridImg.icon3"/>
            </div>
            <p style="font-weight: 600">雨刮器</p>
            <p style="font-weight: 600">原价：100元</p>
            <p style="font-weight: 600">现价：60元</p>
          </div>
        </van-grid-item>
        <van-grid-item to="/carDetails">
          <div style="text-align:left;width:100%;height:214px">
            <div style="text-align:center;width:100%;height:8rem">
              <van-image width="8rem" height="100%" :src="gridImg.icon3"/>
            </div>
            <p style="font-weight: 600">雨刮器</p>
            <p style="font-weight: 600">原价：100元</p>
            <p style="font-weight: 600">现价：60元</p>
          </div>
        </van-grid-item>

      </van-grid>
    </div>
    <div class="listCont">
      <div style="color:#101010;font-size: 1.75rem">搜索结果</div>
      <van-list v-model="loading" :finished="finished" @load="onLoad" style="background: white">
        <div @click="toDetails"  v-for="(item, index) in list" :key="index" style="background: white" class="list-item">
          <div  class="van-card__header"><a  class="van-card__thumb">
            <div  class="van-image" style="width: 100%; height: 100%;">
              <img :src="gridImg.icon2" class="van-image__img" style="object-fit: cover;">
            </div>
          </a>
          <div>
            <p class="message-list">反光镜 适用车型</p>
            <p class="message-list">¥200元</p>
          </div>
          </div>
          <van-divider/>
        </div>
      </van-list>
    </div>

  </div>
</template>
<script>
  export default {
    data() {
      return {
        searchWord: '',
        list: [
          {title: '反光镜 适用车型', content: '¥200元'},
          {title: '雨刮器 适用车型', content: '¥10元'},
        ],
        showDialog: false,
        gridImg: {
          icon1: require("../assets/img/icon (1).png"),
          icon2: require("../assets/img/icon (2).png"),
          icon3: require("../assets/img/icon (3).png"),
          icon4: require("../assets/img/icon(4).png")
        },
        car_num: {
          lacqueredNum: "0",
          maintenanceNum: "0",
          preserveNum: "0"
        },
        userinfo: {
          nickname: "九零后有志青年",
          headimgurl: ""
        },

        oepnId: "",
      };
    },
    methods: {
      toDetails() {
        this.$router.push('/carDetails')
      },
      onSearch() {

      },
      getUrlParam(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
        let r = window.location.search.substr(1).match(reg); // 匹配目标参数
        if (r != null) return decodeURIComponent(r[2]);
        return null; // 返回参数值
      },
      getopenID() {
        let code = this.$route.query.code || this.getUrlParam("code");
        // var state = this.$route.query.state || this.getUrlParam('state')
        var redirectUri = escape(window.location.href + "?state=true");
        var APPID = "wxd5c04a0b457efd8f";
        if (code) {
          var params = {
            code: code
          };
          this.axios
            .get("/api/index/get_openid", {params: params})
            .then(res => {
              var data = res.data;
              localStorage.setItem("userinfo", JSON.stringify(res.data));
              this.oepnId = res.data.data.openid;
              console.log(data);
            })
            .catch(err => {
              console.error(err);
            });
        } else {
          var wxopenidurl =
            "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
            APPID +
            "&redirect_uri=" +
            redirectUri +
            "&response_type=code&scope=snsapi_userinfo&state=true#wechat_redirect";
          window.location.href = wxopenidurl;
        }
      },
      getcarmenu() {
        var openId = "null";
        var params = {
          openId: this.oepnId
        };
        this.axios
          .post("/personal/car_num")
          .then(res => {
            console.log(res);
            this.car_num = res.data.data.list[0];
            console.log(this.car_num);
          })
          .catch(err => {
            console.error(err);
          });
      }
    },
    mounted() {
      var userinfo = JSON.parse(localStorage.getItem("userinfo"));
      if (userinfo == null) {
        this.getopenID();
      } else {
        this.oepnId = userinfo.openid;
        console.log(userinfo);
      }
      this.getcarmenu();

    },
    computed: {
      badgeNumber() {
        return this.$store.state.messageNumber
      }
    }
  };
</script>
<style scoped>
  .list-item {
    height: 65px
  }

  .van-card__thumb {
    margin-left:10px;
    width: 48px;
    height: 48px
  }

  .van-card__content {
    height: 48px !important;
  }

  .van-divider {
    margin: 0 0 15px 0;
  }

  .img-class {
    height: 1rem;
    width: 1rem;
  }

  .message-list {
    margin: 5px 0px;
    font-weight: 600;
  }

  .message {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    color: #eeeeee;
  }

  .userheader {
    padding: 15px;
    background: #ffffff;
    background: url("http://img0.imgtn.bdimg.com/it/u=3209478221,3791663447&fm=26&gp=0.jpg");
    height: 167px;
    display: flex;
    justify-content: left;
    align-items: center;
  }

  .userheader .van-row--flex {
    justify-content: center;
    align-items: center;
  }

  .userheader p {
    color: #fff;
    font-size: 15px;
    line-height: 30px;
  }
</style>
